<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-order-commont">
      <div v-for="(items,key) in orderLists" :key="key">
        <!--商品列表1-->
        <ul class="order-list">
          <li class="item">
            <a class="product" href="#">
              <div class="item-media">
                <image class="img" mode="aspectFill" :src="items.icon"></image>
              </div>
              <div class="item-inner">
                <div class="inner1">
                  <p class="p p1">{{items.title}}</p>
                </div>
                <div class="inner2">
                  <p class="p p3">¥{{items.price}}</p>
                  <p class="p p5">x{{items.num}}</p>
                </div>
              </div>
            </a>

            <div class="total">
              <!-- <span class="span">数量:10</span> -->
              <span class="span">总计:¥{{items.total}}</span>
            </div>
          </li>
        </ul>

        <!--商品评价-->
        <div class="comment-box">
          <textarea name="evaluate" rows="3" placeholder="请输入商品评价" v-model="items.evaluate"></textarea>

          <div class="weui-uploader__bd">
            <div class="weui-uploader__files">
              <block v-for="item in items.files" :key="index">
                <div class="weui-uploader__file" @click="predivImage" :data-files="items.files" :id="item">
                  <image class="weui-uploader__img" :src="item" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box">
              <div class="weui-uploader__input" @click="chooseImage(e,items)"></div>
            </div>
          </div>
        </div>

        <!--单个商品评分-->
        <div class="order-rate">
          <div class="weui-cells__title">描述评分</div>
          <div class="weui-rate-wrap">
            <div class="tit">商品描述:</div>
            <ul class="weui-rate clear">
              <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= items.productValue}" :data-id="items.id" :data-index='index' @click="productRate">
                <i class="icon-star"></i>
              </li>
            </ul>
            <div>{{items.productScore}}</div>
          </div>
        </div>
      </div>

      <!--订单总评分-->
      <div class="order-rate">
        <div class="weui-cells__title">订单评分</div>
        <div class="weui-rate-wrap">
          <div class="tit">服务态度:</div>
          <ul class="weui-rate clear">
            <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= serviceValue}" :data-index='index' @click="serviceRate">
              <i class="icon-star"></i>
            </li>
          </ul>
          <div>{{serviceScore}}</div>
        </div>

        <div class="weui-rate-wrap">
          <div class="tit">物流描述:</div>
          <ul class="weui-rate clear">
            <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= LogisticsValue}" :data-index='index' @click="LogisticsRate">
              <i class="icon-star"></i>
            </li>
          </ul>
          <div>{{LogisticsScore}}</div>
        </div>
      </div>

      <div class="ga-bottom-fixed">
        <a href="#" class="bottom" @click="tijiao">
          提交
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data () {
      return {
        /*模拟数据*/
        orderLists:[
          {
            id:0,
            title:'标题1',
            num:1,
            files:[],
            productValue:-1,
            productScore: '',
            icon: '',
            price: '0.00'
          },
          {
            id:1,
            title:'标题2',
            num:2,
            files:[],
            productValue:-1,
            productScore: '',
            icon: '',
            price: '0.00'
          },
          {
            id:2,
            title:'标题3',
            num:3,
            files:[],
            productValue:-1,
            productScore: '',
            icon: '',
            price: '0.00'
          },
        ],
        max: 5,
        rateScoreDesc: ['非常不满意', '比较差', '一般', '比较满意', '非常满意'],
        serviceValue: -1,
        serviceScore: '',
        LogisticsValue: -1,
        LogisticsScore: '',
      }
    },

    created () {

    },
    onShow () {
      if(!this.$root.$mp.query.hasOwnProperty('id')){
          wx.navigateBack()
      }
    },
    mounted () {
       this.load()
    },

    methods:{
      async load () {
          let params = {
             id: this.$root.$mp.query.id
          }
          this.$_util.ajax.post('https://guo-a.com/mapi/order/detail?token=' + this.$store.state.Token,params).then((res) => {
             //console.log(res)
             if(res.code === 200){
                if(res.data._order_goods.length>0){
                  // console.log(res.data._order_goods)
                   var items = []
                   res.data._order_goods.forEach(function(value,index,array){
                       let values = {
                          id:value.goods_id,
                          title:value.goods_name,
                          num:value.goods_number,
                          files:[],
                          productValue:-1,
                          productScore: '',
                          icon: value.icon,
                          price: value.goods_price,
                           //total: (Number(value.goods_number) * Number(value.goods_price)).tofixed(2)
                          total: value.goods_number * value.goods_price,
                          evaluate: ''
                       }
                       items.push(values)
                   })
                   //console.log(items)

                   this.orderLists = items
                   this.serviceValue = -1
                   this.LogisticsValue = -1
                }else{
                  wx.navigateBack()
                }
             }else{
                wx.navigateBack()
             }
          })
      },
      async tijiao () {
          var params = {}
          params.serviceValue = this.serviceValue + 1
          params.LogisticsValue = this.LogisticsValue + 1
          params.order_id = this.$root.$mp.query.id
          var goods = []
          this.orderLists.forEach(function(value,index,array){
              goods.push({
                id: value.id,
                files: value.files,
                productValue: value.productValue + 1,
                evaluate: value.evaluate
              })
          })
          params.goods = JSON.stringify(goods)
          console.log(params)
          this.$_util.ajax.post('https://guo-a.com/mapi/product/addeva?token=' + this.$store.state.Token,params).then((res)=>{
            console.log(res)
            if(res.code === 200){
                wx.navigateBack()
            }else{
               wx.showToast({
                    title: '网络错误，请重试',
                    duration: 1000,
                    mask:true
                })
            }
          })
      },
      /*
      * 上传图片
      * */
      async chooseImage(e,items) {
        let that = this
        wx.chooseImage({
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            console.log(res)
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            //items.files = items.files.concat(res.tempFilePaths);
            // console.log(items.files);
            // console.log(that.orderLists)
            
            res.tempFilePaths.forEach(function(value,index,array){
               wx.uploadFile({
                  url: 'https://guo-a.com/mapi/product/uploadpic',      //此处换上你的接口地址
                  filePath: value,
                  name: 'img',
                  header: {  
                    "Content-Type": "multipart/form-data",
                    'accept': 'application/json'
                  },
                  success: function(res){
                   var data = res.data
                   items.files = items.files.concat(data);

                  },
                  fail: function(res){
                    console.log('fail');
         
                  }
              })
             })
          },
          fail: function () {
            //console.log('fail');
          },
          complete: function () {
            //console.log('commplete');
          }
        })
      },
      /*
      * 图片预览
      * */
      predivImage(e) {
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: e.currentTarget.dataset.files // 需要预览的图片http链接列表
        })
      },
      /*
      * 商品描述评分
      * */
      productRate(e) {
        const current =  e.mp.currentTarget.dataset.index;
        const id =  e.mp.currentTarget.dataset.id;

        this.orderLists.forEach(item=>{
          if(item.id==id){
            item.productValue=current;
            item.productScore=this.rateScoreDesc[current];
          }
        });
      },
      /*
      * 服务态度评分
      * */
      serviceRate(e) {
        this.serviceValue = e.mp.currentTarget.dataset.index;
        this.serviceScore = this.rateScoreDesc[this.serviceValue];
      },
      /*
      * 物流描述评分
      * */
      LogisticsRate(e) {
        this.LogisticsValue = e.mp.currentTarget.dataset.index;
        this.LogisticsScore = this.rateScoreDesc[this.LogisticsValue];
      }
    }
  }
</script>
